<template>
  <div class="manage-wrap">
    <div class="company-box">
      <span class="title">企业选择:</span>
      <div class="content-box">
        <span class="company" v-text="company" @click="openCompanyList"></span>
        <img src="./drop-down.png" class="pic-down" onclick="return false"/>
      </div>
    </div>
    <div class="employ-box" @click="recruits">
      <span class="title">入职员工管理</span>
      <img src="./in.png" class="pic-in" onclick="return false"/>
    </div>
    <div class="employ-box" @click="enterprise">
      <span class="title">企业员工管理</span>
      <img src="./in.png" class="pic-in" onclick="return false"/>
    </div>

    <div class="open-box" v-show="showCompany" @click="closeCompanyList">
      <div class="open-list">
        <div class="name" v-for="(item,index) in companyList" :key="index"
             @click="selectCompany(item.id,item.mechanismName)">{{item.mechanismName}}
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"

  export default {
    data() {
      return {
        company: "",
        showCompany: false,
        mechanismId: "",
        companyList: [],
        userSign: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.queryMechanism();
    },
    methods: {
      openCompanyList() {
        this.showCompany = true;
      },
      closeCompanyList() {
        this.showCompany = false;
      },
      selectCompany(id, name) {//选择所在企业
        this.showCompany = false;
        this.company = name;
        this.mechanismId = id;
      },
      queryMechanism() {//查询驻厂管理的厂列表
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_teacher_mechanism?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_teacher_mechanism?sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data != null && resultObj.data.length > 0) {
              this.companyList = resultObj.data;
              this.mechanismId = this.companyList[0].id;
              this.company = this.companyList[0].mechanismName;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        })
      },
      recruits() {//入职员工
        this.$router.push({path: '/employlist', query: {id: this.mechanismId}})
      },
      enterprise() {
        this.$router.push({path: '/enterpriselist', query: {mechanismId: this.mechanismId}})
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .manage-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    overflow: hidden
    .company-box
      display: flex
      align-items: center
      wh(100%, 2rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid #F2F2F2
      .title
        margin-left: 0.307rem
        margin-right: 0.227rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .content-box
        flex: 1
        position: relative
        margin-right: 0.32rem
        height: 1.067rem
        border: 0.027rem solid rgba(102, 102, 102, 1)
        border-radius(0.16rem)
        display: flex
        align-items: center
        .company
          display: inline-block
          padding-left: 0.347rem
          wh(95%, 1.067rem)
          line-height: 1.067rem
          font-size: 0.4rem
          color: rgba(102, 102, 102, 1)
        .pic-down
          wh(0.373rem, 0.373rem)
          margin-left: auto
          margin-right: 0.32rem

    .employ-box
      display: flex
      align-items: center
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid #F2F2F2
      .title
        margin-left: 0.307rem
        size-color(0.427rem, rgba(51, 51, 51, 1))
      .pic-in
        wh(0.373rem, 0.373rem)
        margin-left: auto
        margin-right: 0.32rem
    .open-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 88
      fj(center, center)
      background-color: rgba(0, 0, 0, 0.5)
      .open-list
        position: fixed
        z-index: 99
        bottom: 0
        left: 0
        wh(100%, 6.44rem)
        background: #FFF
        overflow: auto;
        .name
          fj(center, center)
          height: 1.28rem
          border-bottom: 1px solid #EEE
          cursor: pointer
          size-color(0.44rem, #666666)
          &:hover
            color: #3CAFFF
</style>
